<div id="root"> 
    <qf-nav-bar 
        left-arrow
        @click-left="clickLeftFn" 
        @click-right="clickRightFn" 
        title="用户创建"
    ></qf-nav-bar>

    <h1>表单组件</h1>
    <qf-table @submit="submitFn"></qf-table>

    <h1>按钮组件</h1>
    <qf-button type="primary" content="主要按钮"></qf-button>
    <qf-button type="info" content="信息按钮"></qf-button>
    <qf-button type="default" content="默认按钮"></qf-button>
    <qf-button type="warning" content="警告按钮"></qf-button>
    <qf-button type="danger" content="危险按钮"></qf-button>
    
    <h1>loading1组件效果</h1>
    <qf-loading1 :state="loading1State"></qf-loading1>
    <button @click="loading1State = true">显示loading</button>
    <button @click="loading1State = false">隐藏loading</button>

    <h1>loading2组件效果</h1>
    <!-- <qf-loading2 :state="loading2State" @close="data=>loading2State=data"></qf-loading2> -->
    <qf-loading2 :state.sync="loading2State"></qf-loading2>
    <button @click="loading2State = true">显示loading</button>

    <h1>dialog</h1>
    <qf-dialog :visible.sync="dialogState" title="用户创建" content="<input type='text'/>"></qf-dialog>
    <button @click="dialogState = true">显示对话框</button>

    <h1>分页组件page</h1>
    <qf-page :total="11" :page-size="2" @click-page="changePageFn"></qf-page>

</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link rel="stylesheet" href="./qfui.css">
<script src="./qfui.js"></script>
<script>
const vm = new Vue({
    el: "#root",
    data: {
        loading1State:false,
        loading2State:false,

        dialogState:false,
    },
    methods:{
        changePageFn(pageNum) {
            console.log('你点击分页了：', pageNum)
        },
        clickLeftFn(){
            alert('clickLeftFn')
        },
        clickRightFn(){
            alert('clickRightFn')
        },
        submitFn(formData){
            console.log('表单数据:',formData);
            alert('用户创建请求接口..')
        }
    }
})
</script>